<template>
	<view>
		<view class="cart-container">
			<!-- 商品列表区域 -->
			<uni-swipe-action>
				<block v-for="(item, index) in cartList" :key="index"  v-if="item.num>0&&userInfo"
					class="good-item">
					<uni-swipe-action-item :rightOptions="rightOptions" @click="swipeActionClickHandler(item)">
						<!-- <my-goods @radio-change="radioChangeHandler" @num-change="numChangeHandler($event,item._id)"
							:showNum="true" :showRadio="true" :goods="item"></my-goods> -->
						<view class="group">
							<!-- 复选框 -->
							<checkbox-group @change="changeitem(item)" class="checkbox">
								<checkbox class="checkbox" color="#c00000" :value="item.price"
									:checked="item.checked" />
							</checkbox-group>

							<image :src="item.imgUrl" @click="toGoodsDetail(item)" class="item-pic"></image>
							<view class="goods">
								<view class="goods-name" @click="toGoodsDetail(item)">{{item.productName}}</view>
								<view class="subtotal">
									<view class="goods-price">￥{{item.price}}</view>
									<view class="number">
										<view class="plus-substact">
											<view class="substact" @click="substactAmount(item)"> <text
													class="jian"></text> </view>
											<view class="amount">{{item.num}}</view>
											<view class="plus" @click="addAmount(item)"><text class="jia"></text>+
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</uni-swipe-action-item>
				</block>
			</uni-swipe-action>


			<view class="settle-box" v-if="total>0&&userInfo">
				<view class="checkbox">
					<checkbox-group @change="selectAll">
						<checkbox :checked="allChecked">全选</checkbox>
					</checkbox-group>
				</view>

				<view class="total-box">
					<view class="total">合计：<text class="setstyle"> ￥{{totalPrice}}</text></view>
					<!-- <button class="foot-btn" :disabled="isDisabled" @click="toSettle()">结算</button> -->
					<view class="foot-btn" @click="toSettle()">
						结算
					</view>
				</view>
			</view>



			<!-- 失效商品 列表-->
			<!-- <block v-for="(item, index) in cart" :key="index"> -->
			<!-- <my-goods @radio-change="radioChangeHandler" @num-change="numChangeHandler" :showDisabledGoods="true">
			</my-goods> -->
			<!-- </block> -->

			<!-- 商品结算区域 -->
			<!-- <my-settle v-if="cartList.length>0"></my-settle> -->
			<!-- 	<view class="settle">
				<label class="radio">
					<radio value="" /><text>全选</text>
				</label>
			</view> -->
			<!-- 空白购物车区域 -->
			<view class="empty-cart" v-else>
				<image src="/static/icons/shopping_empty@3x.png" class="empty-img"></image>
				<text class="tip-text">您还没有添加物品哦~</text>
			</view>

		</view>

	</view>
</template>

<script>
	// 导入 mixin 模块
	import {
		mapState,
		mapMutations
	} from 'vuex'

	export default {
		data() {
			return {
				isDisabled: true,
				checkList: [], //选中值
				allChecked: false, //是否全选
				rightOptions: [{
					text: '删除', // 滑动以后，显示的文本
					style: {
						backgroundColor: '#d90e10'
					}
				}],
				cartList: [], // 购物车商品列表
				total: 0 // 购物车数量
			}
		},
		onLoad() {
			// this.getCartList()
		},
		onShow() {
			if (JSON.stringify(this.userInfo)!=='{}') {
				this.getCartList()
			}
			this.allChecked = false
			this.checkList = []
		},
		methods: {
			// ...mapMutations('m_cart', ['addToCart'),
			// 点击商品 去商品详情
			toGoodsDetail(item){
				console.log(item)
				uni.navigateTo({
					url:'/subpkg/goods-detail/goods-detail?id='+item.productId
				})
			},
			// 去结算
			toSettle() {
				let orderList = JSON.stringify(this.checkList)
				// console.log(orderList)
				// 登录的情况就去结算
				if (JSON.stringify(this.userInfo)!=='{}' && this.checkList.length) {
					uni.navigateTo({
						url: '/subpkg/cart-order/cart-order?checkList=' + JSON.stringify(this.checkList)
					})
				} else if (!this.checkList.length) {
					uni.$showMsg('请至少选择一项商品！')
				} else if (JSON.stringify(this.userInfo)=='{}') {
					let redirect = '/pages/cart/cart';
					uni.navigateTo({
						url: '/pages/my/my'
					})
					uni.setStorageSync('redirect', redirect)
					uni.$showMsg('请先登录!')
				}
			},

			//单选
			changeitem(item) {
				item.checked = !item.checked
				if (!item.checked) {
					this.allChecked = false
					console.log(item.checked)
					this.checkList = this.cartList.filter(item => {
						return item.checked === true
					})
					if (this.checkList.length) {
						this.isDisabled = false
					} else {
						this.isDisabled = true
					}
				} else {
					console.log(item.checked)
					// 判断每一个商品是否是被选择的状态
					const checktList = this.cartList.every(item => {
						return item.checked === true
					})
					this.checkList = this.cartList.filter(item => {
						return item.checked === true
					})
					if (this.checkList.length) {
						this.isDisabled = false
					} else {
						this.isDisabled = true
					}
					if (checktList) {
						this.allChecked = true
					} else {
						this.allChecked = false
					}
				}
			},
			//全选，全不选
			selectAll() {
				this.allChecked = !this.allChecked
				if (this.allChecked) {
					this.cartList.map(item => {
						item.checked = true
					})
					this.checkList = this.cartList.filter(item => {
						return item.checked === true
					})
					if (this.checkList.length) {
						this.isDisabled = false
					} else {
						this.isDisabled = true
					}
				} else {
					this.cartList.map(item => {
						item.checked = false
					})
					this.checkList = this.cartList.filter(item => {
						return item.checked === true
					})
					if (this.checkList.length) {
						this.isDisabled = false
					} else {
						this.isDisabled = true
					}
				}
			},
			// 监听单选框切换后的状态，并获取对应的参数
			radioChangeHandler(e) {
				// this.updateGoodsStatus(e)
			},

			// 监听商品数量加减的组件 
			// async numChangeHandler(e, id) {
			// 	// this.updateGoodsCount(e)
			// 	this.getCartList()
			// },
			// 监听商品数量减少事件
			async substactAmount(goods) {
				if (goods.num > 0) {
					const {
						data: res
					} = await uni.$http.post('/cart/addCart', {
						userId: this.userInfo._id,
						productId: goods.productId,
						num: '-1'
					})
					console.log(res)
					this.checkList = []
					this.allChecked = false
					this.getCartList()
				} else {
					// // 数量为0的时候，将商品从购物车删除
					// const i = this.cartList.find(item => {
					// 	item._id == goods._id
					// })
					// console.log(i)
					// this.cartList.splice(i, 1)
				}
				// console.log(goods._id,this.userInfo._id)
			},
			// 监听商品数量增加事件
			async addAmount(good) {
				console.log(good)
				const goods = {
					userId: this.userInfo._id,
					productId: good.productId,
					num: '1'
				}
				const {
					data: res
				} = await uni.$http.post('/cart/addCart', goods)
				console.log(res)
				this.checkList = []
				this.allChecked = false
				this.getCartList()
				// console.log(goods._id,this.userInfo._id)
			},
			// 下拉刷新页面
			// onPullDownRefresh() {
			// 	this.getCartList()
			// },

			// 移除当前的商品
			swipeActionClickHandler(goods) {
				// console.log(goods)
				this.removeGoodsIdItem(goods._id)
			},
			async removeGoodsIdItem(id) {
				// console.log(id)
				const {
					data: res
				} = await uni.$http.post('/cart/removeCart', {
					id: id,
					userId: this.userInfo._id,
				})
				this.getCartList()
				// console.log(res)
			},
			// 获取购物车列表
			async getCartList() {
				console.log(this.userInfo._id)
				const {
					data: res
				} = await uni.$http.post('/cart/getCartList', {
					userId: this.userInfo._id
				})
				console.log(res)

				// this.cartList = res.data

				this.cartList= res.data.filter(item => {
					return item.num > 0
				})
				


				let total = 0
				res.data.forEach(item => {
					return total += item.num
				})
				this.total = total
			}
		},
		computed: {
			totalPrice() {
				let totalPrice = 0
				this.checkList.forEach(item => {
					item.checked ? totalPrice += item.price * item.num : totalPrice += 0
				})
				return totalPrice.toFixed(2)
			},
			...mapState('m_cart', ['cart']),
			...mapState('m_user', ['userInfo'])
		}
	}
</script>

<style lang="scss">
	.cart-container{
		padding-bottom: 80rpx;
	}
	.cart-title {
		height: 40rpx;
		display: flex;
		align-items: center;
		font-size: 14rpx;
		padding-left: 5rpx;
		border-bottom: 1rpx solid #efefef;

		.cart-title-text {
			margin-left: 10rpx;
		}
	}

	.empty-cart {
		display: flex;
		flex-direction: column;
		align-items: center;
		position: fixed;
		top: 40%;
		left: 50%;
		transform: translate(-50%, -50%);

		.empty-img {
			width: 171rpx;
			height: 129rpx;
		}

		.tip-text {
			font-size: 36rpx;
			font-weight: 400;
			color: #C0C0C0;
			margin-top: 68rpx;
		}
	}

	.item-pic {
		width: 140rpx;
		height: 140rpx;
		border-radius: 12rpx;
		display: block;
		margin: 0 14rpx;
	}

	.group {
		display: flex;
		align-items: center;
		height: 215rpx;
		padding: 0 24rpx;
		border-bottom: 1rpx solid #ececec;
	}

	.goods-name {
		height: 80rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 30rpx;
		font-weight: 500;
		color: #333;
		margin-top: 22rpx;
		margin-bottom: 10rpx;
		// height: 80rpx;
	}

	.goods {
		width: 490rpx;
	}

	.goods-price {
		font-size: 30rpx;
		font-weight: 500;
		color: #FF1111;
		height: 60rpx;
		line-height: 60rpx;
	}

	.good-item {
		border-bottom: 1rpx solid #ececec;
	}

	.subtotal {
		display: flex;
		justify-content: space-between;
		width: 100%;
	}

	checkbox .wx-checkbox-input {
		border-radius: 50% !important;
		color: #ffffff !important;
	}

	checkbox .wx-checkbox-input.wx-checkbox-input-checked {
		color: #fff;
		background: #D80E0E;
	}

	.settle-box {
		display: flex;
		position: relative;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 98rpx;
		background: #FFFFFF;
		box-shadow: 0px -2rpx 8rpx 1rpx rgba(0, 0, 0, 0.03);
		display: flex;
		padding-left: 24rpx;
		padding-right: 24rpx;
		font-size: 28rpx;
		color: #666666;
		align-items: center;
	}

	.total-box {
		display: flex;
		align-items: center;
		margin-left: 120rpx;

		.setstyle {
			font-size: 30rpx;
			font-weight: bold;
			color: #FF1111;
		}

		.foot-btn {
			position: absolute;
			right: 80rpx;
			width: 200rpx;
			height: 78rpx;
			line-height: 78rpx;
			text-align: center;
			font-size: 34rpx;
			font-weight: bold;
			color: #FFFFFF;
			background: #D80E0E;
			border-radius: 39rpx;
		}
	}

	.plus-substact {
		width: 172rpx;
		height: 52rpx;
		line-height: 52rpx;
		// height: 100%;
		border: 1rpx solid #D3D3D3;
		border-radius: 26rpx;
		display: flex;
		justify-content: space-evenly;
		// align-items: center;
		text-align: center;
		margin-left: 80rpx;
		margin-top: 5rpx;


		.substact,
		.plus,
		.amount {
			color: #c0c0c0;
			flex: 1;
			font-size: 40rpx;
			height: 100%;
			font-size: 50rpx;
		}

		.jian {
			width: 20rpx;
			height: 5rpx;
			background: #C0C0C0;
			border-radius: 2rpx;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translateX(-50%);
		}

		.substact {
			position: relative;
		}
		.plus{
		}

		

		.amount {
			border-left: 1px solid #D6D6D6;
			border-right: 1px solid #D6D6D6;
			font-size: 34rpx !important;
			font-weight: 500;
			color: #5B5B5B;
		}
	}
</style>
